<template>
  <m-card :icon="icon" :title="title">
    <div class="nav-list">
      <div class="nav-item"
           v-for="(category, i) in categories" :key="i"
           :class="{active: active === i}"
           @click="$refs.list.swiper.slideTo(i)"
      >
        <div class="nav-link">{{category.name}}</div>
      </div>
    </div>
    <div class="content">
      <swiper ref="list" :options="{autoHeight: true}"
              @slide-change="() => active = $refs.list.swiper.realIndex">
        <swiper-slide v-for="(category, i) in categories" :key="i">
          <slot name="items" :category="category"></slot>
        </swiper-slide>
      </swiper>
    </div>
  </m-card>
</template>

<script>
export default {
  props: {
    icon: { type: String, required: true },
    title: { type: String, required: true },
    categories: { type: Array, required: true }
  },
  data () {
    return {
      active: 0
    }
  }
}
</script>

<style lang="scss" scoped>
.nav-list{
  display: flex;
  justify-content: space-between;
  align-items: center;
  .nav-item{
    line-height: .46rem;
    .nav-link{
      font-size: .26rem;
      &.active{
        color: #db9e3f;
        border: 1px solid #db9e3f;
      }
    }
  }
}
 .content{
   margin: .3rem auto 0;

 }
</style>
